<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<html lang="en">
<head>
    <%@ include file="/commons/global.jsp" %>
    <title>待办任务列表</title>
    <!-- 样式文件的引入 -->
    <link href="${ctx}/commons/css/style.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="${ctx}/commons/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/commons/themes/icon.css">
    <!-- jqueryUI JS文件的引入 -->
    <script type="text/javascript" src="${ctx}/commons/js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="${ctx}/commons/js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${ctx}/commons/js/easyui-extends-validate.js"></script>
    <!-- jqueryUI国际化 -->
    <script type="text/javascript" src="${ctx}/commons/js/easyui-lang-zh_CN.js"></script>
    <!-- 开发使用的公用js方法 -->
    <script type="text/javascript" src="${ctx}/commons/js/common.js"></script>
    <!-- 开发国际化的引用，主要完成后台信息在前台提示的国际化，一定要放在最后 -->
    <script type="text/javascript">var ctx = '${ctx}';
    var actionExt = "action";
    var i18n = new Object();</script>
    <script src="${ctx}/commons/js/i18n/message_zh_CN.js" type="text/javascript"></script>
</head>


<body>

<div style="position:relative;left: 20px; margin-top: 15px; margin-bottom: 15px;">
    <span style="margin-left:100px;width:18px;overflow:hidden;">
        <select style="width: 126px; margin-left: -100px; height: 26px;" onchange="$('#definitionKey').val(this.value)">
            <option value="">请选择 </option>
            <option value="tender_nobid">tender_nobid</option>
            <option value="tender">tender</option>
        </select>
    </span>
    <input type="text" id="definitionKey" style="width:100px;position:absolute;left:0px;"/>
    <input type="button" value="查询" style="height: 26px; width: 52px;"
           onclick="window.location.href=window.location.pathname+'?definitionKey='+$('#definitionKey').val()">
</div>

<c:if test="${not empty message}">
    <div id="message" class="alert alert-success">${message}</div>
    <!-- 自动隐藏提示信息 -->
    <script type="text/javascript">
    </script>
</c:if>
<table id="forkeytasklist" width="100%" class="datagrid-btable">
    <thead>
    <tr>
        <th>任务ID</th>
        <th>任务Key</th>
        <th>任务名称</th>
        <th>流程定义ID</th>
        <th>流程实例ID</th>
        <th>优先级</th>
        <th>任务创建日期</th>
        <th>任务逾期日</th>
        <th>任务描述</th>
        <th>任务所属人</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody align="center">
    <c:forEach items="${tasks }" var="task">
        <tr>
            <td>${task.id }</td>
            <td>${task.taskDefinitionKey }</td>
            <td>${task.name }</td>
            <td>${task.processDefinitionId }</td>
            <td>${task.processInstanceId }</td>
            <td>${task.priority }</td>
            <td>${task.createTime }</td>
            <td>${task.dueDate }</td>
            <td>${task.description }</td>
            <td>${task.owner }</td>
            <td>
                <c:if test="${empty task.assignee }">
                    <a class="claim" href="${ctx }/form/dynamic/task/claim/${task.id}">签收</a>
                </c:if>
                <c:if test="${not empty task.assignee }">
                    <%-- 此处用tkey记录当前节点的名称 --%>
                    <a class="handle" tkey='${task.taskDefinitionKey }' tname='${task.name }' tid='${task.id }'
                       href="#">办理</a>
                </c:if>
            </td>
        </tr>
    </c:forEach>
    </tbody>
</table>

<!-- 办理任务对话框 -->
<div id="processForm" class="template"></div>

</body>
<script type="text/javascript">
    var d;
    /**
     * 动态Form办理功能
     */
    $(function () {
        $('.handle').click(readForm);

    });

    /**
     * 签收和办理任务
     */
    var d;
    function readForm() {
        var dialog = $("#processForm");
        var taskId = $(this).attr("tid");
        //alert(taskId);
        // 读取任务的表单
        $.getJSON('${ctx }/form/dynamic/get-form/task/' + taskId, function (datas) {
            //alert(JSON.stringify(datas));
            var html = "<form class='dynamic-form' method='post'action='${ctx}/form/dynamic/task/complete/" + taskId + "'><table class=''>"
            var trs = "";
            $.each(datas.taskFormData.formProperties, function () {
                var className = this.required === true ? "required" : "";
                this.value = this.value ? this.value : "";
                trs += "<tr>" + createFieldHtml(this, datas, className);
                if (this.required === true) {
                    trs += "<span style='color:red'>*</span>";
                }
                trs += "</td></tr>";
            });

            // 添加table内容
            html += trs;
            //dialog.html(dialog.html()+trs)//.find('tr').hover(function() {$(this).addClass('ui-state-hover');}, function() {$(this).removeClass('ui-state-hover');});
            dialog.html(html + "</table></form>");
            //alert(dialog.html());

            var $form = $('.dynamic-form');

            // 设置表单action 和表格样式 、时间控件
            //$form.attr('action', '${ctx}/form/formkey/test');
            $form.find("table").attr("class", "infoTable")
            $form.find('.dateISO,.date').datetimebox({showSeconds: false});//attr("class","easyui-datetimebox");//

            // 表单验证
            //$form.validate($.extend({}, $.common.plugin.validator));

            if (d != null) {
                d.dialog("open");
                return;
            }

            d = $('#processForm').dialog({
                title: '启动流程',
                iconCls: 'icon-add',
                width: 700,
                height: 520,
                closed: false,
                cache: false,
                modal: true,
                buttons: [{
                    text: '提交',
                    iconCls: 'icon-ok',
                    handler: function () {
                        //提交表单
                        $('#processForm').dialog('close');
                        submitProcessForm();
                    }
                }, {
                    text: '取消',
                    iconCls: 'icon-cancel',
                    handler: function () {
                        $('#processForm').dialog('close');
                    }
                }]
            });

        });
    }


    /**
     * form对应的string/date/long/enum/boolean类型表单组件生成器
     * fp_的意思是form paremeter
     */
    var formFieldCreator = {
        'string': function (prop, datas, className) {
            var result = "<td width='120'>" + prop.name + "：</td>";
            if (prop.writable === true) {
                result += "<td><input type='text' id='" + prop.id + "' name='fp_" + prop.id + "' class='" + className + "' value='" + prop.value + "' />";
            } else {
                result += "<td>" + prop.value;
            }
            return result;
        },
        'date': function (prop, datas, className) {
            var result = "<td width='120'>" + prop.name + "：</td>";
            if (prop.writable === true) {
                result += "<td><input type='text' id='" + prop.id + "' name='fp_" + prop.id + "' class='date " + className + "' value='" + prop.value + "'/>";
            } else {
                result += "<td>" + prop.value;
            }
            return result;
        },
        'enum': function (prop, datas, className) {
            var result = "<td width='120'>" + prop.name + "：</td>";
            if (prop.writable === true) {
                result += "<td><select id='" + prop.id + "' name='fp_" + prop.id + "' class='" + className + "'>";
                $.each(datas[prop.id], function (k, v) {
                    result += "<option value='" + k + "'>" + v + "</option>";
                });
                result += "</select>";
            } else {
                result += "<td>" + prop.value;
            }
            return result;
        },
        'users': function (prop, datas, className) {
            var result = "<td width='120'>" + prop.name + "：</td>";
            if (prop.writable === true) {
                result += "<td><input type='text' id='" + prop.id + "' name='fp_" + prop.id + "' class='" + className + "' value='" + prop.value + "' />";
            } else {
                result += "<td>" + prop.value;
            }
            return result;
        }
    };

    /**
     * 生成一个field的html代码
     */
    function createFieldHtml(prop, className) {
        return formFieldCreator[prop.type.name](prop, className);
    }


    //提交表单
    function submitProcessForm() {
        //alert($('.formkey-form').attr("action"));
        //$('.formkey-form').submit();

        $.ajax({
            type: "post",
            timeout: 20000,
            url: $('.dynamic-form').attr("action"),
            data: $(".dynamic-form").serialize(),
            success: function (data) {
                top.$.messager.alert('提示', "任务完成成功", 'info', function () {
                    window.location.href = "${ctx}/form/dynamic/task/list"
                });
            },
            error: function (data) {
                alert(2);
            }
        });
    }


</script>
</html>
